<template>
  <el-table :data="tableData" style="width: 100%">
    
    <el-table-column fixed prop="date" label="Date" width="150">
      <template #default="{ row, $index }">
        <el-date-picker
          v-model="row.date"
          type="date"
          placeholder="Pick a day"
          :prefix-icon="customPrefix"
          size="small"
          style="margin-top: 5px; width: 100%;"
        />
      </template>
    </el-table-column>

    <el-table-column label="Progress" width="500">
      <template #default="{ row, $index }">
        <el-slider
          v-model="row.progress"
          :min="0"
          :max="100"
          :step="1"
          show-input
          show-tooltip
          format-tooltip="{ value => `${value}%` }"
          style="width: 100%; margin-top: 5px;"
        />
      </template>
    </el-table-column>

    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="state" label="State" width="120" />
    <el-table-column prop="city" label="City" width="120" />
    <el-table-column prop="address" label="Address" width="600" />
    <el-table-column prop="zip" label="Zip" width="120" />

    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default="{ row, $index }">
        <el-button link type="primary" size="small">Edit</el-button>
        <el-button link type="danger" size="small" @click="deleteRow($index)">
          Delete
        </el-button>
        <el-button type="success" size="small" @click="goToRecordPage(row)">
          Record
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-button type="primary" @click="goToHomePage">Go to Home</el-button>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { h, ref, shallowRef } from 'vue'

const customPrefix = shallowRef({
  render() {
    return h('p', 'pre')
  },
})

const router = useRouter();

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
    progress: 60, 
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
    progress: 30,  
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
    progress: 90,  
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
    progress: 50,  
  },
]);

const deleteRow = (index) => {
  tableData.value.splice(index, 1); 
  console.log(`Deleted row at index ${index}`);
};

const goToHomePage = () => {
  router.push("/home");
};

const goToRecordPage = (row) => {
  router.push({ name: 'RecordPage', query: { rowData: JSON.stringify(row) } });
};

</script>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
